import React, { Component } from 'react'; /* eslint-disable eqeqeq */
import PubSub from 'pubsub-js';
import { meshLog, SPRemove, SPGet, SPSet } from '../../../config';
import './settingColorRGB.less'
import rgbbg from '../../../static/touch/rgb_bg.png'
import SettingColorRGBtiao from './settingColorRGBtiao/settingColorRGBtiao'
import Delayed from '../delay'
import { HSVTORGB, HSLTORGB, RGBTOHSV, PandanRGB, SetRGBdate, FirstPandanRGB, } from '../../../utils/adminUtils';
class SettingColorRGB extends Component {
    constructor(a) {
        super(a);
        this.state = {
            zongkongzhi: '1',
        }
    }
    componentDidMount() {
        //获取最大的div
        let rbgcolor = document.getElementById('rbgcolor');
        let boby1 = rbgcolor.getElementsByClassName('boby1')[0];
        let rgbbgimg = boby1.getElementsByClassName('rgbbgimg')[0];
        let rgbbgkuai = boby1.getElementsByClassName('rgbbgkuai')[0];
        let nMax = rgbbgimg.offsetWidth
        let nMay = rgbbgimg.offsetHeight - rgbbgkuai.offsetHeight;
        //页面添加的框的值
        let boby2 = rbgcolor.getElementsByClassName('boby2')[0];
        let inputtext = boby2.getElementsByClassName('inputtext')[0];
        let HEXCSS = boby2.getElementsByClassName('HEXCSS')[0];
        let HEXtext = HEXCSS.getElementsByClassName('HEXtext')[0];
        let REDtext = inputtext.getElementsByClassName('REDtext')[0];
        let GREENtext = inputtext.getElementsByClassName('GREENtext')[0];
        let BLUEtext = inputtext.getElementsByClassName('BLUEtext')[0];
        //获取初始化的数据的方法，已经封装好了，但是不知道为什么不执行
        let rgbpanduan = JSON.parse(SPGet("rgbpanduan"))
        let rgbshuju = JSON.parse(SPGet("rgbshuju"))
        let AllRGBdate = []
        let areaitem;
        let areaitempandun;
        if (rgbpanduan == 1) {
            let areaSetx = JSON.parse(SPGet("areaSetx"));
            for (let index = 0; index < areaSetx.length; index++) {
                if (areaSetx[index].areaNo == rgbshuju.areaNo) {
                    areaitem = areaSetx[index]
                }
            }
            areaitempandun = areaitem.areaNo
        } else if (rgbpanduan == 2) {
            let areaSetx = JSON.parse(SPGet("deviceSetx"));
            for (let index = 0; index < areaSetx.length; index++) {
                if (areaSetx[index].address == rgbshuju.address) {
                    areaitem = areaSetx[index]
                }
            }
            //meshLog('areaitem', areaitem);
            areaitempandun = areaitem.address
        } else if (rgbpanduan == 3) {
            let areaSetx = JSON.parse(SPGet("groupSetx"));
            for (let index = 0; index < areaSetx.length; index++) {
                if (areaSetx[index].groupNo == rgbshuju.groupNo) {
                    areaitem = areaSetx[index]
                }
            }
            areaitempandun = areaitem.groupNo
        }
        //如果是cct到rgb界面这边需要加判断，也就是说cct状态下rgb没有值要赋值给hsl
        if (areaitem.rgbH + areaitem.rgbS + areaitem.rgbL == 0) {
            SPSet('hslh', JSON.stringify(0.5))//存到localStorage
            SPSet('hsls', JSON.stringify(0.5))//存到localStorage
            SPSet('hsll', JSON.stringify(0.5))//存到localStorage
        } else {
            SPSet('hslh', JSON.stringify(areaitem.rgbH))//存到localStorage
            SPSet('hsls', JSON.stringify(areaitem.rgbS))//存到localStorage
            SPSet('hsll', JSON.stringify(areaitem.rgbL))//存到localStorage
        }
        //meshLog(areaitem);
        AllRGBdate[0] = areaitem;
        AllRGBdate[1] = areaitempandun
        let h = parseFloat(SPGet("hslh"))
        let s = parseFloat(SPGet("hsls"))
        let l = parseFloat(SPGet("hsll"))
        let r = 0;
        let g = 0;
        let b = 0;
        //hsl转RGB
        let RGB = HSLTORGB(h, s, l)
        r = RGB[0]; g = RGB[1]; b = RGB[2]
        //赋值到页面上
        REDtext.value = Math.round(r * 255)
        GREENtext.value = Math.round(g * 255)
        BLUEtext.value = Math.round(b * 255)
        HEXtext.value = "#" + ((1 << 24) + (Math.round(r * 255) << 16) + (Math.round(g * 255) << 8) + Math.round(b * 255)).toString(16).slice(1);
        PubSub.publish('RGBtiaobackColor', HEXtext.value)//控制settingColorRGBtiao的背景颜色
        //获取初始化的数据的方法，已经封装好了，但是不知道为什么不执行   结束
        //滑块添加拖拽事件
        rgbbgkuai.addEventListener('mousedown', function (event) {
            let nInitX = event.clientX;
            let nInity = event.clientY;
            let nInitLeft = this.offsetLeft;
            let nInitTop = this.offsetTop;
            let rgbpanduan = JSON.parse(SPGet("rgbpanduan"))
            let areaSetxxx = PandanRGB(rgbpanduan)
            document.onmousemove = event => {
                event.preventDefault();
                let nX = event.clientX - nInitX + nInitLeft;
                let nY = event.clientY - nInity + nInitTop;
                let dim = areaSetxxx[0].dim;
                const dimx = ((dim) / 65535 * 100)
                if (nX >= nMax) {
                    nX = nMax;
                }
                //限制滑块最小移动位置
                if (nX <= 0) {
                    nX = 0;
                }
                let R = 0;
                let G = 0;
                let B = 0;
                //判断在第几象限
                if (nX >= 125 && nY <= 125) {
                    let RR = (nX - 125) * (nX - 125) + (125 - nY) * (125 - nY)
                    if (RR < (125 * 125)) {
                        meshLog('settingColorRGB.jsx.121行，在第一象限不变');
                        let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                        //hsv转rgb
                        let hh = (90 - jiaodu)
                        let hhh = 0
                        if ((hh - 60) > 0) {
                            hhh = 360 - (hh - 60)
                        } else {
                            hhh = 360 - (hh - 60 + 360)
                        }
                        let RGB = HSVTORGB(hhh, RR, dimx)
                        R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                        //hsv转rgb结束
                    } else {
                        meshLog('settingColorRGB.jsx.135行，在第一象限变');
                        let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                        //hsv转rgb
                        let hh = (90 - jiaodu)
                        let hhh = 0
                        if ((hh - 60) > 0) {
                            hhh = 360 - (hh - 60)
                        } else {
                            hhh = 360 - (hh - 60 + 360)
                        }
                        let RGB = HSVTORGB(hhh, RR, dimx)
                        R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                        //hsv转rgb结束
                        let nXX = 125 * Math.cos(jiaodu * Math.PI / 180)
                        let nYY = 125 * Math.sin(jiaodu * Math.PI / 180)
                        nX = nXX + 125 - 6
                        nY = 125 - nYY - 6
                    }
                } else if (nX > 125 && nY > 125) {
                    let RR = (nX - 125) * (nX - 125) + (125 - nY) * (125 - nY)
                    if (RR < (125 * 125)) {
                        meshLog('settingColorRGB.jsx.156行,在第2象限不变');
                        let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                        //hsv转rgb
                        let hh = (90 - jiaodu)
                        let hhh = 0
                        if ((hh - 60) > 0) {
                            hhh = 360 - (hh - 60)
                        } else {
                            hhh = 360 - (hh - 60 + 360)
                        }
                        //meshLog('hhh', hhh);
                        let sss = (Math.sqrt(RR)) / 125
                        let vvv = dimx / 100
                        let i = parseInt((hhh) / 60 % 6)
                        let f = hhh / 60 - i
                        let p = vvv * (1 - sss)
                        let q = vvv * (1 - f * sss)
                        let t = vvv * (1 - (1 - f) * sss)
                        switch (i) {
                            case 0:
                                R = vvv; G = t; B = p
                                break;
                            case 1:
                                R = q; G = vvv; B = p
                                break;
                            case 2:
                                R = p; G = vvv; B = t
                                break;
                            case 3:
                                R = p; G = q; B = vvv
                                break;
                            case 4:
                                R = t; G = p; B = vvv
                                break;
                            case 5:
                                R = vvv; G = p; B = q
                                break;
                            default:
                                break;
                        }
                        SPSet('hhh', JSON.stringify(hhh))//存到localStorage
                        SPSet('sss', JSON.stringify(sss))//存到localStorage
                        R = parseInt(R * 255); G = parseInt(G * 255); B = parseInt(B * 255)
                        //hsv转rgb结
                    } else {
                        meshLog('settingColorRGB.jsx.201行,在第2象限变');
                        let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                        //hsv转rgb
                        let hh = (90 - jiaodu)
                        let hhh = 0
                        if ((hh - 60) > 0) {
                            hhh = 360 - (hh - 60)
                        } else {
                            hhh = 360 - (hh - 60 + 360)
                        }
                        //meshLog('hhh', hhh);
                        let RGB = HSVTORGB(hhh, RR, dimx)
                        R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                        //hsv转rgb结
                        let nXX = 125 * Math.cos(jiaodu * Math.PI / 180)
                        let nYY = 125 * Math.sin(jiaodu * Math.PI / 180)
                        nX = nXX + 125 - 6
                        nY = 125 - nYY - 6
                    }
                } else if (nX <= 125 && nY >= 125) {
                    let RR = (nX - 125) * (nX - 125) + (125 - nY) * (125 - nY)
                    if (RR < (125 * 119)) {
                        meshLog('settingColorRGB.jsx.223行,在第3象限不变');
                        let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                        //meshLog('jiaodu', jiaodu);
                        //hsv转rgb
                        let hh = (90 - jiaodu)
                        let hhh = 0
                        if ((hh - 60) > 0) {
                            hhh = 360 - (hh - 60) - 180
                        } else {
                            hhh = 360 - (hh - 60 + 360) + 180
                        }
                        //meshLog('hhh', hhh);
                        let RGB = HSVTORGB(hhh, RR, dimx)
                        R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                        //hsv转rgb结束
                    } else {
                        meshLog('settingColorRGB.jsx.239行,在第3象限变');
                        let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                        //meshLog('jiaodu', jiaodu);
                        //hsv转rgb
                        let hh = (90 - jiaodu)
                        let hhh = 0
                        if ((hh - 60) > 0) {
                            hhh = 360 - (hh - 60) - 180
                        } else {
                            hhh = 360 - (hh - 60 + 360) + 180
                        }
                        // meshLog('hhh', hhh);
                        let RGB = HSVTORGB(hhh, RR, dimx)
                        R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                        //hsv转rgb结束
                        let nXX = 125 * Math.cos(jiaodu * Math.PI / 180)
                        let nYY = 125 * Math.sin(jiaodu * Math.PI / 180)
                        nX = 125 - nXX - 6
                        nY = 125 + nYY - 6
                    }
                } else if (nX < 125 && nY < 125) {
                    let RR = (nX - 125) * (nX - 125) + (125 - nY) * (125 - nY)
                    if (RR < (125 * 125)) {
                        meshLog('settingColorRGB.jsx.262行,在第4象限不变');
                        let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                        //meshLog('jiaodu', jiaodu);
                        //hsv转rgb
                        let hh = (90 - jiaodu)
                        let hhh = 0
                        if ((hh - 60) > 0) {
                            hhh = 360 - (hh - 60) - 180
                        } else {
                            hhh = 360 - (hh - 60 + 360) + 180
                        }
                        // meshLog('hhh', hhh);
                        let RGB = HSVTORGB(hhh, RR, dimx)
                        R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                        //hsv转rgb结束
                    } else {
                        meshLog('settingColorRGB.jsx.278行,在第4象限变');
                        let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                        //meshLog('jiaodu', jiaodu);
                        //hsv转rgb
                        let hh = (90 - jiaodu)
                        let hhh = 0
                        if ((hh - 60) > 0) {
                            hhh = 360 - (hh - 60) - 180
                        } else {
                            hhh = 360 - (hh - 60 + 360) + 180
                        }
                        //meshLog('hhh', hhh);
                        let RGB = HSVTORGB(hhh, RR, dimx)
                        R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                        //hsv转rgb结束
                        let nXX = 125 * Math.cos(jiaodu * Math.PI / 180)
                        let nYY = 125 * Math.sin(jiaodu * Math.PI / 180)
                        nX = 125 - nXX - 6
                        nY = 125 + nYY - 6
                    }
                } else {
                    meshLog('settingColorRGB.jsx.299行,在圆心');
                }
                //赋值到页面上
                REDtext.value = R
                GREENtext.value = G
                BLUEtext.value = B
                this.style.left = nX - 125 + 'px';
                this.style.top = nY + 125 + 'px';
                HEXtext.value = "#" + ((1 << 24) + (R << 16) + (G << 8) + B).toString(16).slice(1);
                setTimeout(() => {
                    PubSub.publish('RGBtiaobackColor', HEXtext.value)//控制settingColorRGBtiao的背景颜色
                }, 500)
            }
            //鼠标松开绑定事件，取消页面上所有事件
            document.onmouseup = async function (event) {
                document.onmousemove = null;
                document.onmouseup = null;
                let R = REDtext.value;
                let G = GREENtext.value;
                let B = BLUEtext.value;
                //引入方法在方法里处理数据
                SetRGBdate(R, G, B)
            }
        });
        //滑动条添加点击事件
        rgbbgimg.addEventListener('click', async function (event) {
            //meshLog(nMax);
            let nLeft = this.offsetLeft;
            let nTop = this.offsetTop;
            let eParent = this.offsetParent;
            while (eParent) {
                //添加定位父元素offsetLeft值，用于准确定位滑动条与页面左侧的距离
                nLeft += eParent.offsetLeft;
                nTop += eParent.offsetTop;
                //再次获取父元素外的定位父元素
                eParent = eParent.offsetParent;
            }
            let nX = event.clientX - nLeft;
            let nY = event.clientY - nTop;
            let rgbpanduan = JSON.parse(SPGet("rgbpanduan"))
            let areaSetxxx = PandanRGB(rgbpanduan)
            let dim = areaSetxxx[0].dim;
            const dimx = ((dim) / 65535 * 100)
            if (nX >= nMax) {
                nX = nMax;
            }
            //限制滑块最小移动位置
            if (nX <= 0) {
                nX = 0;
            }
            let R = 0;
            let G = 0;
            let B = 0;
            //判断在第几象限
            if (nX >= 125 && nY <= 125) {
                let RR = (nX - 125) * (nX - 125) + (125 - nY) * (125 - nY)
                if (RR < (125 * 125)) {
                    meshLog('settingColorRGB.jsx.356行,在第一象限不变');
                    let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                    meshLog('settingColorRGB.jsx.356行,jiaodu', jiaodu);
                    //hsv转rgb
                    let hh = (90 - jiaodu)
                    let hhh = 0
                    if ((hh - 60) > 0) {
                        hhh = 360 - (hh - 60)
                    } else {
                        hhh = 360 - (hh - 60 + 360)
                    }
                    let RGB = HSVTORGB(hhh, RR, dimx)
                    R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                    //hsv转rgb结束
                } else {
                    meshLog('settingColorRGB.jsx.371行,在第一象限变');
                    let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                    meshLog('settingColorRGB.jsx.371行,jiaodu', jiaodu);
                    //hsv转rgb
                    let hh = (90 - jiaodu)
                    let hhh = 0
                    if ((hh - 60) > 0) {
                        hhh = 360 - (hh - 60)
                    } else {
                        hhh = 360 - (hh - 60 + 360)
                    }
                    //meshLog('hhh', hhh);
                    let RGB = HSVTORGB(hhh, RR, dimx)
                    R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                    //hsv转rgb结束
                    let nXX = 125 * Math.cos(jiaodu * Math.PI / 180)
                    let nYY = 125 * Math.sin(jiaodu * Math.PI / 180)
                    nX = nXX + 125
                    nY = 125 - nYY
                }
            } else if (nX > 125 && nY > 125) {
                let RR = (nX - 125) * (nX - 125) + (125 - nY) * (125 - nY)
                if (RR < (125 * 125)) {
                    meshLog('settingColorRGB.jsx.394行,在第2象限不变');
                    let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                    meshLog('settingColorRGB.jsx.394行,jiaodu', jiaodu);
                    //hsv转rgb
                    let hh = (90 - jiaodu)
                    let hhh = 0
                    if ((hh - 60) > 0) {
                        hhh = 360 - (hh - 60)
                    } else {
                        hhh = 360 - (hh - 60 + 360)
                    }
                    //meshLog('hhh', hhh);
                    let RGB = HSVTORGB(hhh, RR, dimx)
                    R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                    //hsv转rgb结
                } else {
                    meshLog('settingColorRGB.jsx.410行,在第2象限变');
                    let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                    //hsv转rgb
                    let hh = (90 - jiaodu)
                    let hhh = 0
                    if ((hh - 60) > 0) {
                        hhh = 360 - (hh - 60)
                    } else {
                        hhh = 360 - (hh - 60 + 360)
                    }
                    //meshLog('hhh', hhh);
                    let RGB = HSVTORGB(hhh, RR, dimx)
                    R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                    //hsv转rgb结
                    let nXX = 125 * Math.cos(jiaodu * Math.PI / 180)
                    let nYY = 125 * Math.sin(jiaodu * Math.PI / 180)
                    nX = nXX + 125
                    nY = 125 - nYY
                }
            } else if (nX <= 125 && nY >= 125) {
                let RR = (nX - 125) * (nX - 125) + (125 - nY) * (125 - nY)
                if (RR < (125 * 119)) {
                    meshLog('settingColorRGB.jsx.432行,在第3象限不变');
                    let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                    meshLog('settingColorRGB.jsx.432行,jiaodu', jiaodu);
                    //hsv转rgb
                    let hh = (90 - jiaodu)
                    let hhh = 0
                    if ((hh - 60) > 0) {
                        hhh = 360 - (hh - 60) - 180
                    } else {
                        hhh = 360 - (hh - 60 + 360) + 180
                    }
                    //meshLog('hhh', hhh);
                    let RGB = HSVTORGB(hhh, RR, dimx)
                    R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                    //hsv转rgb结束
                } else {
                    meshLog('settingColorRGB.jsx.448行,在第3象限变');
                    let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                    meshLog('settingColorRGB.jsx.448行,jiaodu', jiaodu);
                    //hsv转rgb
                    let hh = (90 - jiaodu)
                    let hhh = 0
                    if ((hh - 60) > 0) {
                        hhh = 360 - (hh - 60) - 180
                    } else {
                        hhh = 360 - (hh - 60 + 360) + 180
                    }
                    // meshLog('hhh', hhh);
                    let RGB = HSVTORGB(hhh, RR, dimx)
                    R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                    //hsv转rgb结束
                    let nXX = 125 * Math.cos(jiaodu * Math.PI / 180)
                    let nYY = 125 * Math.sin(jiaodu * Math.PI / 180)
                    nX = 125 - nXX
                    nY = 125 + nYY
                }
            } else if (nX < 125 && nY < 125) {
                let RR = (nX - 125) * (nX - 125) + (125 - nY) * (125 - nY)
                if (RR < (125 * 125)) {
                    meshLog('settingColorRGB.jsx.471行,在第4象限不变');
                    let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                    meshLog('settingColorRGB.jsx.471行,jiaodu', jiaodu);
                    //hsv转rgb
                    let hh = (90 - jiaodu)
                    let hhh = 0
                    if ((hh - 60) > 0) {
                        hhh = 360 - (hh - 60) - 180
                    } else {
                        hhh = 360 - (hh - 60 + 360) + 180
                    }
                    // meshLog('hhh', hhh);
                    let RGB = HSVTORGB(hhh, RR, dimx)
                    R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                    //hsv转rgb结束
                } else {
                    meshLog('settingColorRGB.jsx.487行,在第4象限变');
                    let jiaodu = Math.atan((125 - nY) / (nX - 125)) * 180 / Math.PI
                    meshLog('settingColorRGB.jsx.487行,jiaodu', jiaodu);
                    //hsv转rgb
                    let hh = (90 - jiaodu)
                    let hhh = 0
                    if ((hh - 60) > 0) {
                        hhh = 360 - (hh - 60) - 180
                    } else {
                        hhh = 360 - (hh - 60 + 360) + 180
                    }
                    //meshLog('hhh', hhh);
                    let RGB = HSVTORGB(hhh, RR, dimx)
                    R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
                    //hsv转rgb结束
                    let nXX = 125 * Math.cos(jiaodu * Math.PI / 180)
                    let nYY = 125 * Math.sin(jiaodu * Math.PI / 180)
                    nX = 125 - nXX
                    nY = 125 + nYY
                }
            } else {
                meshLog('在圆心');
            }
            // meshLog('R', R);
            // meshLog('G', G);
            // meshLog('B', B);
            //赋值到页面上
            REDtext.value = R
            GREENtext.value = G
            BLUEtext.value = B
            //rgb转16进制的方法
            HEXtext.value = "#" + ((1 << 24) + (R << 16) + (G << 8) + B).toString(16).slice(1);
            setTimeout(() => {
                PubSub.publish('RGBtiaobackColor', HEXtext.value)//控制settingColorRGBtiao的背景颜色
            }, 500)
            //引入方法在方法里处理数据
            SetRGBdate(R, G, B)
            rgbbgkuai.style.left = nX - 125 - 6 + 'px';
            rgbbgkuai.style.top = nY + 125 - 6 + 'px';
        });
        //hsl页面转达的信息
        PubSub.unsubscribe("RGB")
        PubSub.subscribe('RGB', (msg, data) => {
            meshLog('settingColorRGB.jsx.530行,rgb页面数据第2步  RGB');
            let h = parseFloat(SPGet("hslh"))
            let s = parseFloat(SPGet("hsls"))
            let l = parseFloat(SPGet("hsll"))
            let r = 0;
            let g = 0;
            let b = 0;
            //hsl转RGB
            let RGB = HSLTORGB(h, s, l)
            r = RGB[0]; g = RGB[1]; b = RGB[2]
            //赋值到页面上
            REDtext.value = Math.round(r * 255)
            GREENtext.value = Math.round(g * 255)
            BLUEtext.value = Math.round(b * 255)
            HEXtext.value = "#" + ((1 << 24) + (Math.round(r * 255) << 16) + (Math.round(g * 255) << 8) + Math.round(b * 255)).toString(16).slice(1);
            PubSub.publish('RGBtiaobackColor', HEXtext.value)//控制settingColorRGBtiao的背景颜色
            //hsl转RGB结束
            //RGB转hsv
            let HSV = RGBTOHSV(r, g, b)
            let H = HSV[0]
            let S = HSV[1]
            let V = HSV[2]
            //RGB转hsv结束
            // meshLog('H', H);
            // meshLog('S', S);
            meshLog('V', V);
            //得到的V需要改外面组和灯的亮度，反馈给RGBtiao 这个地方不应该修改背景颜色
            PubSub.publish('RGBV', V)
            //修改RGB页面上的小球的位置 H和V需要上传到数据库中
            //修改球的位置
            let xx = 0
            let yy = 0
            if (H > 0 && H <= 60) {
                meshLog('settingColorRGB.jsx,563行,1象限');
                xx = Math.cos((30 + parseInt(H)) * 2 * Math.PI / 360) * (S) * 125
                yy = Math.sin((30 + parseInt(H)) * 2 * Math.PI / 360) * (S) * 125
                rgbbgkuai.style.left = Math.round(xx) - 6 + 'px';
                rgbbgkuai.style.top = Math.round(125 - yy + 6 + 118) + 'px';
            } else if (H > 60 && H < 150) {
                meshLog('settingColorRGB.jsx,569行,四象限');
                xx = Math.cos((180 - (30 + parseInt(H))) * 2 * Math.PI / 360) * (S) * 125
                yy = Math.sin((180 - (30 + parseInt(H))) * 2 * Math.PI / 360) * (S) * 125
                rgbbgkuai.style.left = - xx + 6 + 'px';
                rgbbgkuai.style.top = (125 - yy) - 6 + 125 + 'px';
            } else if (H >= 150 && H < 240) {
                meshLog('settingColorRGB.jsx,575行,三象限');
                xx = Math.cos(((30 + parseInt(H)) - 180) * 2 * Math.PI / 360) * (S) * 125
                yy = Math.sin(((30 + parseInt(H)) - 180) * 2 * Math.PI / 360) * (S) * 125
                rgbbgkuai.style.left = - xx + 6 + 'px';
                rgbbgkuai.style.top = yy + 118 + 125 - 6 + 'px';
            } else if (H >= 240 && H < 330) {
                meshLog('settingColorRGB.jsx,581行,2象限');
                xx = Math.cos(((30 + parseInt(H)) - 270) * 2 * Math.PI / 360) * (S) * 125
                yy = Math.sin(((30 + parseInt(H)) - 270) * 2 * Math.PI / 360) * (S) * 125
                rgbbgkuai.style.left = xx - 6 + 'px';
                rgbbgkuai.style.top = yy + 118 + 125 - 6 + 'px';
            } else if (H >= 330 && H < 360) {
                meshLog('settingColorRGB.jsx,587行,1象限');
                xx = Math.cos(((30 + parseInt(H)) - 360) * 2 * Math.PI / 360) * (S) * 125
                yy = Math.sin(((30 + parseInt(H)) - 360) * 2 * Math.PI / 360) * (S) * 125
                rgbbgkuai.style.left = xx - 6 + 'px';
                rgbbgkuai.style.top = (125 - yy) + 118 + 6 + 'px';
            } else {
                meshLog('settingColorRGB.jsx,593行,1象限');
                xx = Math.cos((30) * 2 * Math.PI / 360) * (S) * 125
                yy = Math.sin((30) * 2 * Math.PI / 360) * (S) * 125
                rgbbgkuai.style.left = xx - 6 + 'px';
                rgbbgkuai.style.top = (125 - yy) + 118 + 6 + 'px';
            }
            //修改球的位置结束
        });
        //RGBtiao反馈回来的信息需要修改RGB的值
        PubSub.unsubscribe("RGBtiao")
        PubSub.subscribe('RGBtiao', async (msg, data) => {
            //meshLog(data);
            let R = 0;
            let G = 0;
            let B = 0;
            //hsv转rgb 从数据库拿h和S
            let rgbH = data.rgbH
            let rgbS = data.rgbS
            let rgbL = data.rgbL
            //hsv转RGB
            let RGB = HSLTORGB(rgbH, rgbS, rgbL)
            R = parseInt(RGB[0] * 255); G = parseInt(RGB[1] * 255); B = parseInt(RGB[2] * 255)
            REDtext.value = R
            GREENtext.value = G
            BLUEtext.value = B
            HEXtext.value = "#" + ((1 << 24) + (R << 16) + (G << 8) + B).toString(16).slice(1);
            PubSub.publish('RGBtiaobackColor', HEXtext.value)//控制settingColorRGBtiao的背景颜色
            //反馈给hsl页面
            PubSub.publish('HSL1', 1)
            PubSub.publish('HSL2', 1)
            PubSub.publish('HSL3', 1)
        });
        //点击RGB按钮控制的数据，修改页面的默认值可以在这边修改
        PubSub.unsubscribe("rgbdate")
        PubSub.subscribe('rgbdate', (msg, data) => {
            meshLog('settingColorRGB.jsx,628行,rgb页面数据第一步');
            let rgbpanduan = JSON.parse(SPGet("rgbpanduan"))
            let areaitem = FirstPandanRGB(rgbpanduan)
            //meshLog('areaitem', areaitem[0]);
            //接下来的操作修改默认在（hsl页面转达的信息）这个里面修改了
        });
    }
    maxLengthCheck = (object) => {
        let rbgcolor = document.getElementById('rbgcolor');
        let boby1 = rbgcolor.getElementsByClassName('boby1')[0];
        let rgbbgimg = boby1.getElementsByClassName('rgbbgimg')[0];
        let rgbbgkuai = boby1.getElementsByClassName('rgbbgkuai')[0];
        let nMax = rgbbgimg.offsetWidth
        let nMay = rgbbgimg.offsetHeight - rgbbgkuai.offsetHeight;
        // meshLog('nMax', nMax);
        //页面添加的框的值
        let boby2 = rbgcolor.getElementsByClassName('boby2')[0];
        let inputtext = boby2.getElementsByClassName('inputtext')[0];
        let HEXCSS = boby2.getElementsByClassName('HEXCSS')[0];
        let HEXtext = HEXCSS.getElementsByClassName('HEXtext')[0];
        let REDtext = inputtext.getElementsByClassName('REDtext')[0];
        let GREENtext = inputtext.getElementsByClassName('GREENtext')[0];
        let BLUEtext = inputtext.getElementsByClassName('BLUEtext')[0];
        if (object.target.value.length > 3) {
            object.target.value = 255
        } else {
            if (object.target.value > 255) {
                object.target.value = 255
            } else if (object.target.value <= 0) {
                object.target.value = 1
            } else {
                object.target.value = object.target.value
            }
        }
        let r = REDtext.value / 255;
        let g = GREENtext.value / 255;
        let b = BLUEtext.value / 255;
        HEXtext.value = "#" + ((1 << 24) + (Math.round(r * 255) << 16) + (Math.round(g * 255) << 8) + Math.round(b * 255)).toString(16).slice(1);
        PubSub.publish('RGBtiaobackColor', HEXtext.value)//控制settingColorRGBtiao的背景颜色
        //RGB转hsv
        let HSV = RGBTOHSV(r, g, b)
        let H = HSV[0]
        let S = HSV[1]
        let V = HSV[2]
        //RGB转hsv结束
        // meshLog('H', H);
        // meshLog('S', S);
        // meshLog('V', V);
        //得到的V需要改外面组和灯的亮度，反馈给RGBtiao 这个地方不应该修改背景颜色
        PubSub.publish('RGBV', V)
        //修改RGB页面上的小球的位置 H和V需要上传到数据库中
        //修改球的位置
        let xx = 0
        let yy = 0
        if (H > 0 && H <= 60) {
            meshLog('settingColorRGB.jsx,683行,1象限');
            xx = Math.cos((30 + parseInt(H)) * 2 * Math.PI / 360) * (S) * 125
            yy = Math.sin((30 + parseInt(H)) * 2 * Math.PI / 360) * (S) * 125
            rgbbgkuai.style.left = Math.round(xx) - 6 + 'px';
            rgbbgkuai.style.top = Math.round(125 - yy + 6 + 118) + 'px';
            // meshLog(rgbbgkuai.style.left);
            // meshLog(rgbbgkuai.style.top);
        } else if (H > 60 && H < 150) {
            meshLog('settingColorRGB.jsx,691行,四象限');
            xx = Math.cos((180 - (30 + parseInt(H))) * 2 * Math.PI / 360) * (S) * 125
            yy = Math.sin((180 - (30 + parseInt(H))) * 2 * Math.PI / 360) * (S) * 125
            rgbbgkuai.style.left = - xx + 6 + 'px';
            rgbbgkuai.style.top = (125 - yy) - 6 + 125 + 'px';
        } else if (H >= 150 && H < 240) {
            meshLog('settingColorRGB.jsx,697行,三象限');
            xx = Math.cos(((30 + parseInt(H)) - 180) * 2 * Math.PI / 360) * (S) * 125
            yy = Math.sin(((30 + parseInt(H)) - 180) * 2 * Math.PI / 360) * (S) * 125
            rgbbgkuai.style.left = - xx + 6 + 'px';
            rgbbgkuai.style.top = yy + 118 + 125 - 6 + 'px';
        } else if (H >= 240 && H < 330) {
            meshLog('settingColorRGB.jsx,703行,2象限');
            xx = Math.cos(((30 + parseInt(H)) - 270) * 2 * Math.PI / 360) * (S) * 125
            yy = Math.sin(((30 + parseInt(H)) - 270) * 2 * Math.PI / 360) * (S) * 125
            rgbbgkuai.style.left = xx - 6 + 'px';
            rgbbgkuai.style.top = yy + 118 + 125 - 6 + 'px';
        } else if (H >= 330 && H < 360) {
            meshLog('settingColorRGB.jsx,709行,1象限');
            xx = Math.cos(((30 + parseInt(H)) - 360) * 2 * Math.PI / 360) * (S) * 125
            yy = Math.sin(((30 + parseInt(H)) - 360) * 2 * Math.PI / 360) * (S) * 125
            rgbbgkuai.style.left = xx - 6 + 'px';
            rgbbgkuai.style.top = (125 - yy) + 118 + 6 + 'px';
        } else {
            meshLog('settingColorRGB.jsx,715行,1象限');
            xx = Math.cos((30) * 2 * Math.PI / 360) * (S) * 125
            yy = Math.sin((30) * 2 * Math.PI / 360) * (S) * 125
            rgbbgkuai.style.left = xx - 6 + 'px';
            rgbbgkuai.style.top = (125 - yy) + 118 + 6 + 'px';
        }
        //修改球的位置结束
        let R = REDtext.value;
        let G = GREENtext.value;
        let B = BLUEtext.value
        //引入方法在方法里处理数据
        SetRGBdate(R, G, B)
        // meshLog('REDtext', REDtext.value);
        // meshLog('GREENtext', GREENtext.value);
        // meshLog('BLUEtext', BLUEtext.value);
    }
    render() {
        return (
            <div className='boby' id='rbgcolor' >
                <div className='boby1' style={{ width: 281 }}>
                    <img className='rgbbgimg' draggable="false" style={{ cursor: 'pointer', width: 250, height: 250 }} src={rgbbg} alt="" />
                    <div className='rgbbgkuai'></div>
                    <Delayed waitBeforeShow={1000}>
                        <SettingColorRGBtiao></SettingColorRGBtiao>
                    </Delayed>
                </div>
                <div className='boby2' style={{ width: 100 }}>
                    <div className='wenan'>
                        <span className='wenanRED'>RED</span>
                        <span className='wenanGREEN' >GREEN</span>
                        <span className='wenanBLUE' >BLUE</span>
                    </div>
                    <div className='inputtext'>
                        <input type="number" onInput={this.maxLengthCheck} className='REDtext' />
                        <input type="number" onInput={this.maxLengthCheck} className='GREENtext' />
                        <input type="number" onInput={this.maxLengthCheck} className='BLUEtext' />
                    </div>
                    <div className='HEXwenan'>
                        <span className='wenanHEX'>HEX</span>
                    </div>
                    <div className='HEXCSS'>
                        {/* <input onChange={() => { this.HEXtext() }} className='HEXtext' type="string" /> */}
                        <input className='HEXtext' disabled="disabled" type="string" />
                    </div>
                </div>
            </div >
        );
    }
};
export default SettingColorRGB
